<template>
  <div class="login">
    <div class="login-box">
      <div class="bg-img">
        <img src="@/assets/img/collaboration.png" alt="">
      </div>
       <div class="login-from">
         <div class="title"><div class="bg-left"></div>欢迎登录<div class="bg-right"></div></div>
          <a-form :form="form">
        <a-form-item>
          <a-input class="input-pas" placeholder="username" allowClear v-model="form.userCode">
            <a-icon
              slot="prefix"
              type="user"
              style="color: rgba(0, 0, 0, 0.25)"
            />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input class="input-pas" placeholder="password" type="password" allowClear v-model="form.password">
            <a-icon
              slot="prefix"
              type="lock"
              style="color: rgba(0, 0, 0, 0.25)"
            />
          </a-input>
        </a-form-item>
        <a-form-item class="btns">
          <a-button type="primary" @click="btnadd" html-type="submit">
            登录
          </a-button>
        </a-form-item>
      </a-form>
       </div>
    </div>
  </div>
</template>

<script>
import { getPerlogin } from "../api/perClient";
import axios from "../network/index";
export default {
  name: "Login",
  data() {
    return {
      form: {
        userCode: "ymiotsdev",
        password: "dev2021",
      },
    };
  },
  methods: {
    btnadd() {
      console.log(nework);
      getPerlogin(this.form).then((res) => {
        console.log(res);
        const data = res.data;
        if (data.success === false) {
          this.$message.error(data.msg);
          return;
        }
        const name = "campus_token";
        //  window.sessionStorage.setItem("campus_token", res.data.data.campus_token);
        document.cookie = `${name}=${res.data.data.campus_token}`;

        this.$router.push("/home");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.bg-img{
  width: 450px;
  height: 450px;
  margin-left: 20px;
}
.bg-img img{
  width: 100%;
  height: 100%;
}
.login {
  /* background: #2d3a4b; */
  height: 100vh;
  background-image: linear-gradient(to bottom right, #01b8a4, #028db4);
}
.login-box {
  display: flex;
  align-items: center;
  width: 900px;
  height: 500px;
  background: white;
  padding:0 30px;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  border-radius:20px;
  box-shadow:4px 3px 5px #4c4c4c;
  transform: translate(-50%, -50%);
  /* background-color: #1870b530; */
  /* box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1), 10px 0 10px rgba(0, 0, 0, 0.1), 0 -10px 10px rgba(0, 0, 0, 0.1),  0 10px 10px rgba(0, 0, 0, 0.1); */
}
.title {
  display: flex;
  justify-content:center;
  align-items: center;
  font-size: 25px;
  font-weight: 500;
  margin-top: 40px;
  margin-bottom: 50px;
  font-weight: 600;
}
.title .bg-left{
  margin-right: 10px;
  width: 70px;
  height: 2px;
  background-image: linear-gradient(to bottom right, #ffffff, #878787);
}
.title .bg-right{
  margin-left: 15px;
  width: 70px;
  height: 2px;
  background-image: linear-gradient(to bottom left, #ffffff, #878787);
}
.login-logo {
  width: 150px;
  height: 150px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}
.login-logo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.login-from {
  // position: absolute;
  bottom: 0;
  width: 450px;
  padding: 0 15px;
  box-sizing: border-box;
  margin-left: 40px;
  height: 400px;
  
}
.btns {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.ant-input {
  height: 50px !important;
}

.body :global(.ant-input) {
  height: 50px !important;
}
// .input-pas{
//   height: 40px !important;
// }
/deep/ .ant-input {
  height: 40px !important;
  border-radius: 14px;
  padding-left: 40px !important;
  font-size: 17px;

}
/deep/ .anticon{
 font-size:20px;

}
/deep/ .ant-form-item-control{
  width: 100%;
}
/deep/ .ant-btn-primary{
  width: 100%;
  border-radius: 14px;
  height: 40px;
}
/deep/ .ant-form-item-control-wrapper{
  width: 100%;
}

</style>